<template>
  <div class="body">
    <el-card class="theme-card" v-for="theme in themes" @click="selectTheme(theme.dataTheme)">
      <div :style="{ backgroundColor: theme.backgroundColor,aspectRatio: '2 / 1' }" class="color-card">
        <el-icon v-if="theme.dataTheme === currentTheme">
          <i-bi-check-circle-fill />
        </el-icon>
      </div>
      <h5 v-if="theme.dataTheme === currentTheme">
        {{ theme.name }} （当前皮肤）
      </h5>
      <h5 v-else>
        {{ theme.name }}
      </h5>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="Theme">
import { ref, computed } from "vue";
import { useUserStore } from "@/store/UserStore";

const themeStore = useUserStore();

// 假设这些数据来自一个 API 或者静态数组
const themes = ref([
  { id: 2, dataTheme: "dark", name: "炫酷黑", backgroundColor: "#1c1c1c" },
  { id: 3, dataTheme: "light", name: "明亮", backgroundColor: "#efefef" },
  { id: 4, dataTheme: "chunyilv", name: "春意绿", backgroundColor: "#77dc70" }
]);

let currentTheme = computed(() => {
  return themeStore.currentTheme;
});


const selectTheme = (theme: string) => {
  themeStore.currentTheme = theme
  document.documentElement.className = theme;
};

</script>
<style lang="scss" scoped>
.body{
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  .theme-card{
    --el-card-padding: 5px;
    cursor: pointer;
    width: 20vw;
    border-radius: 15px;
    .color-card {
      border-radius: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      .el-icon{
        font-size: 50px;
      }
    }
  }
}
</style>
